<template>
	<div>
		<template v-for="item in navlist">
			<el-submenu v-if="item.children&&item.children.length>0" :key="item.menuId" :index="item.name"  > 
				<template slot="title">
				<i :class="'el-icon-'+item.icon"></i>
				<span slot="title">{{ item.name }}</span>
				</template>
				<navside v-if="item.children&&item.children.length>0" :navlist="item.children"/> 
			</el-submenu>
			<el-menu-item v-else :index="item.menuUrl"  :key="item.menuId">
				<span><i :class="'el-icon-'+item.icon"></i>{{item.name}}</span>
			</el-menu-item>	
		</template>			
	</div>
</template>
<script>
  export default {
	name:'navside',
	mounted(){
	},
	
	data() {
		return {}
	},
	props:['navlist'],
	computed: {
	},
    methods: {
      
    }
  }
</script>
<style>
.el-icon-folder:before{
transition: all 0.5s ease-in-out;
}
/* .el-submenu__title,.el-submenu .el-menu-item{overflow: hidden;text-overflow: ellipsis;padding-right:28px;} */
.el-submenu.is-opened>.el-submenu__title>.el-icon-folder:before {
		content: "\e784";
		}
</style>
